Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a shortcode for nocookie youtube embeds #651

Merged
merged 2 commits into from
Sep 11, 2024

Conversation

ryelle
Copy link
Contributor

@ryelle ryelle commented Sep 10, 2024

See WordPress/wporg-main-2022#493 (comment) — We'd like to use the "privacy-enhanced" youtube embeds, but the domain used is not supported by the core embeds. I've put this code in wporg-mu-plugins because I'll also want to use it on WCUS's livestream pages; and I can see needing it on other pages.

Hopefully the core ticket will be fixed at some point, and we can phase this out.

[youtube-nocookie title="Showcase Day video player"]https://www.youtube-nocookie.com/embed/PM2Ov8atqBw?si=4YwCx25TQfdWPcW_[/youtube-nocookie]
Screenshot 2024-09-10 at 6 34 43 PM

To test

  • Find a youtube video
  • Click share, embed to get to the iframe code
  • Select "Enable privacy-enhanced mode."
Screenshot 2024-09-10 at 6 32 06 PM
  • From there, copy out the src URL
  • Create or edit a post, add the shortcode block
  • Add the shortcode: [youtube-nocookie]COPIED URL[/youtube-nocookie]
  • Optionally set height, width, and title attributes

Try other URLs, it should only create the iframe for youtube-nocookie.com domains.

@ryelle ryelle self-assigned this Sep 10, 2024

return sprintf(
// `allow` settings copied from youtube-provided embed code.
'<iframe style="aspect-ratio: 16/9;" src="%s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen %s></iframe>',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor. Should this use numbered placeholders?

*
* @param array $attr Shortcode attributes array, can be empty if the original arguments string cannot be parsed.
* @param string $content Content inside shortcode tags.
* @param string $tag Shortcode name.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Core uses the parameter name $shortcode for this. Should we also follow that standard?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also don't see that parameter being used.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Core uses $tag elsewhere, so I don't think it's really a standard. This parameter is only useful if we're using the same callback for different shortcodes, which doesn't apply here. I'll remove it.


return sprintf(
// `allow` settings copied from youtube-provided embed code.
'<iframe style="aspect-ratio: 16/9;" src="%s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen %s></iframe>',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would enforcing 16/9 but allowing users to set width/height be an issue for editors?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question— I assumed you would only ever really set one of them, but you can set both and it will override the aspect ratio.

For example, [youtube-nocookie height=300 width=300… is square:

Screenshot 2024-09-11 at 11 27 22 AM

@ryelle
Copy link
Contributor Author

ryelle commented Sep 11, 2024

Going to merge this so I can build out the WordCamp pages, but we can iterate if needed.

@ryelle ryelle merged commit 46c2c32 into trunk Sep 11, 2024
2 checks passed
@ryelle ryelle deleted the add/youtube-nocookie-shortcode branch September 11, 2024 21:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants